<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Martin Debug Page</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="https://unpkg.com/deck.gl@^8.4.0/dist.min.js"></script>
    <script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      const deckgl = new deck.DeckGL({
        container: 'map',
        map: maplibregl,
        mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
        initialViewState: {
          latitude: 0,
          longitude: 0,
          zoom: 3,
          pitch: 40
        },
        controller: true,
        layers: [
          new deck.MVTLayer({
            data: 'http://localhost:3000/points',
            uniqueIdProperty: 'gid',
            getFillColor: f => {
              const alpha = f.geometry.coordinates[1] * 255;
              return f.properties.gid % 2 === 0 ? [51, 204, 204, alpha] : [255, 128, 223, alpha]
            },
            getRadius: f => Math.sqrt(f.properties.gid) / 12,
            pointRadiusUnits: 'pixels',
            pickable: true,
            autoHighlight: true,
            highlightColor: [102, 255, 153],
            onClick: info => console.log(info.object)
          })
        ],
      });
    </script>
  </body>
</html>
